<template>
  <div>
    <!-- 2创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>
<script>
//1.引入饼图图标的构造函数
import { Pie } from "@antv/g2plot";
//2.引入get方法 --->发送get请求
import {get} from '@/utils/request';
export default {
  data() {
    return {
      //存放设备的状态数量
      empData:[]
    };
  },
  methods: {
    //获取设备数据的方法  发送请求
    async getEmpData(){
      let res = await get('/dashboard/queryDeviceOnlineNumber');
      // console.log(res,'获取响应');
      //将后台获取的数据赋值给变量
      this.empData = res.data;
      //获取到数据后去加载图表
      this.loadCharts();
    },
    //声明一个加载饼图的方法
    loadCharts() {
      //3.创建图标实例
      const pie = new Pie(this.$refs.container, {
        appendPadding: 10,
        data:this.empData,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        //设置多色
        color:['#007a87','#055D87','#0f218b'],
        //关闭图例
        legend:true,
        label: {
          type: "outer",
          formatter(v){
            return v.value + '个'
          },
          style:{
            fill:'while',
            fontSize:18
          }
        },
        interactions: [{ type: "element-active" }],
      });
      //4.渲染图标
      pie.render();
    },
  },
  // 生命周期 鈎子函數  created -- 组件实例创建完成
  // 生命周期 組件時列挂載完成挂载完成 --- 获取dom节点
  // vue 11 个声明周期 created mounted 
  mounted(){
    this.getEmpData();
   // this.loadCharts();
  }
};
</script>
